<template>
	<div>
		<el-form :model="state.formObj" ref="formRef">
			<el-form-item v-for="(i, index) in state.formArr" :key="i.key" :label="i.label" :prop="i.key" :rules="i.rules">
				<template v-if="i.type == 'input'">
					<el-input v-model="state.formObj[i.key]"></el-input>
					<el-button icon="Plus" @click="handleAddFormItem('input')"></el-button>
				</template>
				<template v-if="i.type == 'select'">
					<el-select v-model="state.formObj[i.key]">
						<el-option v-for="o in i.options" :key="o" :label="o.label" :value="o.value"></el-option>
					</el-select>
					<el-button icon="Plus" @click="handleAddFormItem('select')"></el-button>
				</template>
			</el-form-item>
		</el-form>
		<el-button @click="handleSubmit">保存</el-button>
	</div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
const formRef = ref()
const state = reactive({
	formObj: {},
	formArr: [
		{
			label: '默认',
			key: 'name',
			val: '',
			type: 'input',
			rules: {
				required: true,
				message: '请输入',
				trigger: 'blur'
			}
		},
		{
			label: '下拉框',
			key: `selectname`,
			val: '',
			options: [
				{
					label: '1',
					value: '1'
				},
				{
					label: '2',
					value: '2'
				}
			],
			type: 'select',
			rules: {
				required: true,
				message: '请选择',
				trigger: 'change'
			}
		}
	]
})
// const sepcs = [
//   {
//     specName: '1',
//     values: [
      
//     ]
//   },
//   {
//     specName:'2',  values: [
//       ]
//   }
// ]
const arr1 = [
  {
    k: 'a',
    val:'11'
  }, {
    k: 'b',
    val:'22'
  }
]

const arr2 = [
  {
    k: 'A',
    val:'一'
  }, {
    k: 'B',
    val:'二'
  }
]

// console.log(arr1.map(i=>arr2.map(item=>{
//   console.log('i.k',i.k,'item.k',item.k,'组合:',i.k+'='+item.k);
// })));
console.log("等",'规格'!= '规格');
// 增加项目
const handleAddFormItem = tp => {
	console.log('tp', tp)
	let len = state.formArr.length
	let item = null
	switch (tp) {
		case 'input':
			item = {
				label: '输入框',
				key: `name${len}`,
				val: '',
				type: 'input',
				rules: {
					required: true,
					message: '请输入',
					trigger: 'blur'
				}
			}
			break

		case 'select':
			item = {
				label: '下拉框',
				key: `selectname${len}`,
				val: '',
				options: [
					{
						label: '1',
						value: '1'
					},
					{
						label: '2',
						value: '2'
					}
				],
				type: 'select',
				rules: {
					required: true,
					message: '请选择',
					trigger: 'change'
				}
			}
			break
	}
	state.formArr.push(item)
}


function cartesianProduct(arrays) {
  return arrays.reduce(
    function (a, b) {
      return a.flatMap(function (x) {
        return b.map(function (y) {
          return x.concat(y)
        })
      })
    },
    [[]]
  )
}

// 保存提交
const handleSubmit = () => {
	formRef.value.validate(valid => {
		console.log('表单', state.formObj)
		if (!valid) {
			ElMessage.error('请完善表单')
			return
		}
		ElMessage.success('表单没得问题,好得狠')
	})
}


</script>

<style scoped lang="scss"></style>
